<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content flex">
            <div class="w220">
                <menu-list></menu-list>
            </div>
            <div class="w980 flex_full">
              <p class="flex flex_vcenter pdb20">
                <i class="titleTag"></i>
                <span class="fRedBig">产品与模块管理</span>
              </p>
                <div class="menuset_con">
                    <div class="menuset_con_left col-md-4">
                        <div class="products">
                            <div class="tit">
                                <h2>产品列表</h2></div>
                            <ul id="productslist">
                                <li v-for="(index,item) in prolists">
                                    <p @click.stop="getrelatemodule(item,$event)" :class="{cur:index==0}">{{item.name}}</p>
                                    <dl>
                                        <dd @click.stop="getrelatemodule(sitem,$event)" v-for="(sindex,sitem) in item.childList">{{sitem.name}}</dd>
                                    </dl>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="menuset_con_right col-md-8">
                        <div class="modules">
                            <table class="table table-hover table-striped">
                                <thead>
                                    <tr>
                                        <th>选择</th>
                                        <th>模块编码</th>
                                        <th>模块名称</th>
                                        <th>备注</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in modulelists" track-by="$index">
                                        <td>
                                            <input type="checkbox" :name="$index" v-model="item.isSelected" @click="changeSelected(item)" />
                                        </td>
                                        <td>{{item.moduleCode}}</td>
                                        <td>{{item.moduleName}}</td>
                                        <td>{{item.moduleDesc}}</td>
                                    </tr>
                                    <!--  <tr>
                                        <td colspan="7">
                                            <div class="form-group" _v-b33c703c="">
                                                <button class="default blue center" _v-b33c703c="">保存</button>
                                            </div>
                                        </td>
                                    </tr> -->
                                    <tr v-if="ishide">
                                        <td colspan="4">
                                            <div class="pull-left">
                                                <button class="secondBtn" @click="refresh">刷新</button>
                                            </div>
                                            <div class="pull-right">
                                                <!-- 分页组件: -->
                                                <boot-page v-ref:page :async="true" :lens="lenArr" :page-len="pageLen" :headersparam="headersparam" :param="param" ></boot-page>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div @click="change111()">更换</div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/reset.css'
import moduleHead from 'components/module-head'
import menuList from 'components/menu-list'
import Public from 'assets/public.js'
import bootPage from 'components/BootPage.vue'
export default {
    data() {
            return {
                prolists: [],
                modulelists: [],
                lenArr: [10, 20, 50], // 每页显示长度设置
                pageLen: 5, // 可显示的分页数
                headersparam: {
                    "X-Service-Id": "base.moduleService",
                    "X-Service-Method": "queryModuleRelationByProductCode",
                },
                param: {
                    code: ""
                },
                ishide: false,

            }
        },
        computed: {

        },
        components: {
            moduleHead, menuList, bootPage
        },
        ready() {
            var that = this;
            //获取产品名称列表
            $.when(Public.commonajax("base.tenantProductsService", "findProducts", "[]"))
                .done(function(res) {
                    if (res.code == 200) {
                        that.prolists = res.body;
                        that.param.code = that.prolists[0].code;

                        that.getrelatemodule();


                    }

                });


        },
        methods: {

            // 列表页面刷新按钮
            refresh() {
                    this.$refs.page.refresh()
                },
                getrelatemodule(item, event) {
                    if (event) {
                        this.param.code = item.code;
                        $(event.target).closest('ul').find("p,dd").removeClass('cur').end().end().addClass("cur");

                    }

                    if (this.ishide) {
                        this.refresh();
                    } else {
                        this.ishide = true;
                    }


                },
                changeSelected(item) {
                    console.log(item.isSelected);
                    var temobj = {
                        "status": item.isSelected ? "0" : "1",
                        "moduleId": item.moduleId, //moduleId
                        "productCode": this.param.code //productCode产品编码

                    };
                    $.when(Public.commonajax("base.moduleService", "saveProductModuleRel", "[" + JSON.stringify(temobj) + "]"))

                    .done(function(res) {
                        if (res.code == 200) {
                            Public.ajaxPrompt("保存成功");
                        } else {
                            Public.ajaxPrompt(res.msg);
                        }

                    });
                }


        },
        events: {
            // 分页列表数据
            'data' (data) {
                this.modulelists = data;
            },
        },
        watch: {

        }
}
</script>
<style scoped>
.menuset_con {
    width: 950px;
    min-height: 644px;
    height: auto!important;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding-top: 30px;
    background-color: #fff;
}

.menuset_con_left {
    border-radius: 0 0 10px 0;
    max-height: 600px;
    overflow: auto
}

.menuset_con_right {
    border-radius: 0 0 10px 0;
    max-height: 600px;
    overflow: auto;
}

.products .tit {
    background: #f8f8f8;
    padding: 10px 20px
}

.products .tit h2 {
    border-left: 5px solid #EDC1B6;
    line-height: 20px;
    font-size: 16px;
    padding: 0 10px;
    height: 20px;
}

.products,
.modules {
    border: 1px solid #ccc;
    border-radius: 5px;
}

.products ul {
    padding: 20px;
}

.products li {
    background: url(../../assets/img/drop.png) no-repeat left 8px;
    padding-left: 15px;
}

.products li dl {
    margin-left: 20px;
}

.products li dd,
.products li p {
    line-height: 28px;
    height: 28px;
}

.products li dd.cur,
.products li p.cur {
    background: #ccc
}

.products li dd:hover,
.products li p:hover {
    cursor: pointer;
}

.modules table th:nth-child(1) {
    text-align: center
}

.modules table td:nth-child(1) {
    width: 50px;
    text-align: center
}

.modules table td:nth-child(2) {
    width: 100px;
}

.modules table td:nth-child(3) {
    width: 100px;
}

.modules table td:nth-child(4) {
    width: 50px;
}
</style>
